<template>
  <div class="swiftMessage">
    <h1 class="con-right-title">直播间快捷消息</h1>
    <!-- 搜索条件 -->
    <div class="messageLise-search" style="margin-left: 30px;">
      <el-form
        :model="searchParams"
        ref="ruleForm"
        :rules="rules"
        :inline="true"
      >
        <el-form-item prop="collegeId">
          <el-select
            v-model="searchParams.collegeId"
            placeholder="所属学院"
            size="small"
            clearable
          >
            <el-option
              v-for="item in collegeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="courseName">
          <el-input
            v-model="searchParams.courseName"
            placeholder="输入课程名称"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="searchMessageList('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addMessage">
        新增
      </el-button>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        label="所属学院"
        width="180"
        align="center"
        prop="collegeName"
      >
        <template slot-scope="scope">
          <div
            v-for="(item, index) in resetCoursesInfos(scope.row.coursesInfos)"
            :key="index"
          >
            {{ item.collegeName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="课程数量" width="180" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.coursesInfos.length }}</div>
        </template>
      </el-table-column>
      <el-table-column label="快捷消息" min-width="130" align="center">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.messages" :key="index"
            >{{ item }} ,</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作人" min-width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user.trueName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="操作时间"
        min-width="80"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.messageOpenStatus === 'CLOSE'">
            <el-button type="text" @click="openOrOffMessage(scope.row)">
              启用
            </el-button>
          </template>
          <template v-else>
            <el-button type="text" @click="openOrOffMessage(scope.row)">
              关闭
            </el-button>
          </template>
          <template>
            <el-button type="text" @click="messageDetail(scope.row)">
              详情
            </el-button>
          </template>
          <template v-if="scope.row.messageOpenStatus === 'CLOSE'">
            <el-button type="text" @click="editMessage(scope.row)">
              编辑
            </el-button>
          </template>
          <template v-if="scope.row.messageOpenStatus === 'CLOSE'">
            <el-button type="text" @click="deleteMessage(scope.row)">
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增、编辑 -->
    <edit-dialog
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      :college-list="collegeList"
      @sendMsg="updateList"
    ></edit-dialog>
    <!-- 详情 -->
    <detail-dialog :detail-data="detailData"></detail-dialog>
  </div>
</template>
<script>
import editDialog from './editDialog'
import detailDialog from './detailDialog'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getMessageList,
  messageOpen,
  messageOff,
  messageDelete
} from '@/api/appSetting/swiftMessage'
export default {
  components: {
    editDialog,
    detailDialog
  },
  data() {
    return {
      loading: true,
      collegeList: [],
      tableData: [],
      dialogData: {
        isShow: false
      },
      detailData: {},
      total: 0,
      searchParams: {
        collegeId: '',
        courseName: '',
        pageNum: 1,
        pageSize: 10
      },
      rules: {
        courseName: [
          { min: 2, message: '最少输入2个关键字查询', trigger: 'blur' }
        ]
      }
    }
  },
  async mounted() {
    /* 学院 */
    this.collegeList = await sysNormalDisable('sys_college', 'collegeType')
    this.searchList()
  },
  methods: {
    /* 快捷消息列表 */
    searchList() {
      this.loading = true
      getMessageList(this.searchParams, (response) => {
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
      })
    },
    /* 点击新增 */
    addMessage() {
      this.dialogData = { title: 'add', isShow: true }
    },
    /* 点击编辑 */
    editMessage(row) {
      this.dialogData = { title: 'edit', isShow: true, id: row.id }
    },
    /* 点击详情 */
    messageDetail(row) {
      this.detailData = { isShow: true, id: row.id }
    },
    /* 点击查询 */
    searchMessageList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchList()
        } else {
          return false
        }
      })
    },
    /* 点击重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 启用或者关闭 */
    openOrOffMessage(row) {
      if (row.messageOpenStatus === 'CLOSE') {
        messageOpen(row.id, () => {
          this.$message({
            message: '启用成功',
            type: 'success'
          })
          this.searchList()
        })
      } else {
        messageOff(row.id, () => {
          this.$message({
            message: '关闭成功',
            type: 'success'
          })
          this.searchList()
        })
      }
    },
    /* 点击删除 */
    deleteMessage(row) {
      this.$confirm('确定要在系统中永久删除礼物吗', '删除礼物', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          messageDelete(row.id, () => {
            if (this.tableData.length <= 1) {
              this.searchParams.pageNum -= 1
            }
            this.searchList()
          })
        })
        .catch(() => {})
    },
    /* 新增编辑后刷新列表 */
    updateList() {
      this.searchList()
    },
    resetCoursesInfos(tempArr) {
      let result = []
      let obj = {}
      for (let i = 0; i < tempArr.length; i++) {
        if (!obj[tempArr[i].collegeId]) {
          result.push(tempArr[i])
          obj[tempArr[i].collegeId] = true
        }
      }
      return result
    }
  }
}
</script>
<style lang="less"></style>
